<template>
	<div id = "login">
		<div class = "logo">
			<img src="src/assets/image/logo.png" alt="">
		</div>
		<div class = "title">
			钱 呢
		</div>
		<div class = "describeText">
			任 何 时 间  都 是 起 点
		</div>
		<!-- 用户表单 -->
		<input type="text" class = "username" placeholder="请输入用户名" v-model = "username" required="required">
		<input type="text" class = "password" placeholder="请输入密码" v-model = "password" required="required">
		<mu-toast v-if="toast" :message = "tips"   @close="hideToast"/>
		<!-- 登陆按钮 -->
		<div class="button"  @click = "login">
			登陆
		</div>
		<div class="registTips">
			还没有账号？<router-link to="/regist"><span>注册</span></router-link>
		</div>
		<!-- 第三方登录 -->
		<div class= "thirdWay">
			<hr>
			<div class = "thirdWay-info">第三方账号登陆</div>
			<img src="src/assets/image/QQ.png" alt="">
			<img src="src/assets/image/weibo.png" alt="">
			<img src="src/assets/image/weChat.png" alt="">
		</div>
		
	</div>
</template>
<script>
	export default{
		data() {
			return {
				username: "",
				password: "",
				toast: false,
				tips: ""
			}
		},
		methods:{
			login: function(){ 
				//验证密码的正则表达式，a-z，A-Z，0-9
				var pswReg = /^[a-zA-Z0-9_]+$/
				//验证用户名
				if(this.username === ""){
					//正确的登录操作
					this.tips = "用户名不能为空"
					this.showToast()
					return false;
				}
				//验证密码
				else if(this.password === ""){
					this.tips = "密码不能为空"
					this.showToast()
					return false;
				}
				else if(this.password.length < 6){
					this.tips = "密码不能小于6位"
					this.showToast()
					return false;
				}
				else{
					if(!pswReg.test(this.password)){
						this.tips = "密码必须为6位英文或数字"
						this.showToast()
						return false;
					}
					else{
						//登录验证
						this.$http.get('http://127.0.0.1/Vue/account/service/login.php', {
							params: {
				              username: this.username,
				              password: this.password
				            }
						    }).then(function(res){
						        if(res.data !== "0"){
						        	console.log(res)
						        	this.$store.commit('setBaseInfo',{
							          username: res.data.nickname,
							          remark: res.data.mark,
							          uid: res.data.uid,
							        })
						        	this.$router.push({ path: 'index/history' })
						        }
						        else{
						        	this.tips = "登陆失败，用户名或密码错误！"
									this.showToast()
									return false;
						        }
						});
					}
				}
				
			},
			showToast () {
		        this.toast = true
		         if (this.toastTimer) clearTimeout(this.toastTimer)
		        this.toastTimer = setTimeout(() => { this.toast = false }, 2000)
		    },
			hideToast () {
		        this.toast = false
		        if (this.toastTimer) clearTimeout(this.toastTimer)
		    }
		}
	}
</script>
<style scoped>
	#login{
		text-align: center;
		padding: 3vh 0 0 0;
	}
	.logo>img{
		width: 45%;
		height: auto;
		/* padding-bottom:  */
	}
	.title{
		font-size: .5rem;
		color: #333;
		padding-bottom: 1vh;
	}
	.describeText{
		font-size: .2rem;
		color: #666;
		padding-bottom: 4vh;
	}
	.username,.password{
		display: inline-block;
		width: 80%;
		border:1px solid #5DCDBF;
		height: 45px;
		border-radius: 15px;
		margin-bottom: 3vh;
		padding: 0 2vh; 
		-webkit-appearance: none;
	}
	.password{
		margin-bottom: 6vh;
	}
	.button{
		display: inline-block;
		height: 45px;
		width: 80%;
		border-radius: 15px;
		background-color: #5DCDBF;
		color: white;
		line-height: 45px;
		font-size: .3rem;
		margin-bottom: 3vh;
	}
	.registTips{
		color: #666;
		margin-bottom: 3vh;
	}
	.registTips span{
		color: #333;
		text-decoration: underline;
	}
	.thirdWay-info{
		margin-top: -20px; 
		margin-bottom: 2vh;
		background-color: white;

		color: #999;
	}
	.thirdWay > img{
		width: 18%;
		margin: 0 3%;
	}
</style>
